<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入的用户信息</title>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="12" :offset="6"><div class="grid-content">

            <el-card class="box-card" shadow="never">
                <div class="text item">
                    <i class="el-icon-s-marketing" style="color: darkcyan"></i>
                    个人信息
                </div>

                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">

                    <el-form-item label="身份证号：" prop="idcard">
                        <el-input v-model="ruleForm.idcard" placeholder="请输入身份证号"></el-input>
                    </el-form-item>

                    <el-form-item label="姓名：" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>

                    <el-form-item label="性别：" prop="sex">
                        <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
                        <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
                    </el-form-item>

                    <el-form-item label="手机号码：" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                    </el-form-item>

                    <el-form-item label="图文验证码：" prop="code">
                        <el-input v-model="ruleForm.code" placeholder="请输入图文验证码"></el-input>
                        <img src="/captcha" onclick="changeCode(this);"/>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                        <el-button type="primary" @click="cancel()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div></el-col>
    </el-row>
</div>

<script>
    function changeCode(obj) {
        obj.src = "/captcha?time="+new Date().getTime();
    }
</script>

<script>
    new Vue({
        el: "#app",
        data() {
            let validatorIdCard = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入身份证号'));
                } else if (value && (!(/\d{17}[\d|x]|\d{15}/).test(value) || (value.length !== 15 && value.length !== 18))) {
                    callback(new Error('身份证号码不符合规范'));
                } else {
                    callback();
                }
            };
            let validatorPhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电话号码'));
                } else if (value && (!(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/).test(value))) {
                    callback(new Error('电话号码不符合规范'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    idcard: '',
                    name: '',
                    phone: '',
                    sex:'',
                    verificationCode:'',
                },
                rules: {
                    idcard: [
                        { validator: validatorIdCard, trigger: 'blur',required: true }
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { validator: validatorPhone, trigger: 'blur',required: true }
                    ],
                    sex: [
                        { required: true, message: '请选择',trigger: 'blur' },
                    ],
                    verificationCode: [
                        { required: true, message: '请输填入验证码', trigger: 'blur' },
                    ],
                }
            };
        },
        created() {

        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.query();
                        alert('确认挂号');

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            cancel() {
                axios.post("/AppointmentController/cancel").then(resp=>{
                    // location.href="---------------------------------.html";
                });
            },

            query(){
                axios.post("/AppointmentController/toRegistration",this.ruleForm).then(resp=>{
                    if (resp.data.code===500){
                        this.$message.error("验证码错误")
                    }else {
                        window.open("/AliPay/Pay")
                        // location.href="/AliPay/Pay";
                        console.log(resp);
                    }

                });
            }

        },
    })
</script>


<style>
    .text {
        font-size: 18px;
    }

    .item {
        margin-bottom: 20px;
    }
    .box-card{
        margin-top: 20px;
    }
</style>

</body>
</html>